<template>
<v-alert v-model="alert" outline :color="computedColor" :icon="computedIcon" :value="true">
</v-alert>
</template>

<script>
  const iconMap = {
    error: 'warning',
    info: 'info',
    success: 'check_circle',
    warning: 'priority_high'
  }

  export default {
    name: 'toast',
    data () {
      return {
        alert: false
      }
    },
    toast (type, message) {
      if (!this.props[type]) {
        console.error('invaild type')
      } else {
        console.log(this.error)
        this.alert = true
      }
    },
    props: {
      error: {
        type: Boolean,
        default: false
      },
      info: {
        type: Boolean,
        default: false
      },
      success: {
        type: Boolean,
        default: false
      },
      warning: {
        type: Boolean,
        default: false
      }
    },

    computed: {
      computedColor () {
        if (this.error) return 'error'
        else if (this.info) return 'info'
        else if (this.success) return 'success'
        else if (this.warning) return 'warning'
      },
      computedIcon () {
        return iconMap[this.computedColor]
      }
    }
  }
</script>

<style>
  .app-alert p {
    margin: 0 !important;
  }
</style>
